<html>

<head>
    <title>绘制旋转的四方体，并自动隐藏正面</title>
    <script src="../three/build/three.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>

</body>
<script>
    window.onload = function () {
        createWorld()
    }

    function createWorld() {
        initRender() //渲染器-成像
        initCamera() //相机
        initLight() //光源
        initObject() //物体
        initScene() //创建场景
        render() //渲染
    }

    var renderer
    var width
    var height

    function initRender(params) {
        width = window.innerWidth
        height = window.innerHeight
        renderer = new THREE.WebGLRenderer({
            antialias: true //开启抗锯齿
        })
        renderer.setSize(width, height)
        renderer.setClearColor('#000000', 1.0) //设置背景颜色
        renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比
        document.body.appendChild(renderer.domElement)
    }

    var camera
    var origPoint = new THREE.Vector3(0, 0, 0) //原点
    function initCamera(params) {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
        camera.position.set(200, 400, 600)
        camera.up.set(0, 1, 0) //设置相机正方向
        camera.lookAt(origPoint) //设置相机透视点
    }

    var pointLight
    var ambientLight

    function initLight(params) {
        //点光源
        pointLight = new THREE.PointLight(0xffffff, 1, 2000)
        pointLight.position.set(70, 112, 98)
        //环境光
        ambientLight = new THREE.AmbientLight(0x333333)
    }

    var cube

    function initObject(params) {
        var geometry = new THREE.BoxGeometry(100, 100, 100)
        var material = new THREE.MeshLambertMaterial({
            color: 0xff0000
        })
        cube = new THREE.Mesh(geometry, material)
        cube.position.set(0, 0, 0)
    }

    var scene

    function initScene(params) {
        scene = new THREE.Scene();
        scene.add(pointLight)
        scene.add(camera)
        scene.add(cube)
    }

    function render() {
        renderer.clear();
        renderer.render(scene, camera)
        cube.rotation.x += 0.005
        cube.rotation.y += 0.005
        requestAnimationFrame(render)
    }
</script>

</html>